<template>
  <div class="home">
    <div class="rain-logo" >
      <img src="../assets/img/logo.png" alt="">
      <span>Rain UI</span>
    </div>
    <div class="rain-desc" >
      <span>轻量、便捷的移动端Vue组件库</span>
    </div>
    <!-- 基础组件 -->
    <div class="rain-title" >基础组件</div>
    <div class="rain-list" v-for="(item,index) in listBase" :key="''+index" >
      <div class="item" @click="clickShow(item.name)" >
        <div>{{item.desc}}</div>
        <div>></div>
      </div>
    </div>
    <!-- 表单组件 -->
    <div class="rain-title" >表单组件</div>
    <div class="rain-list" v-for="(item,index) in listForm" :key="'form'+index" >
      <div class="item" @click="clickShow(item.name)" >
        <div>{{item.desc}}</div>
        <div>></div>
      </div>
    </div>
    <!-- 展示组件 -->
    <div class="rain-title" >展示组件</div>
    <div class="rain-list" v-for="(item,index) in listShow" :key="'show'+index" >
      <div class="item" @click="clickShow(item.name)" >
        <div>{{item.desc}}</div>
        <div>></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    
  }
})
export default class Home extends Vue {
  // data 
  listBase:Array<any> = [ 
    {name:'button',desc:'Button 按钮'},
    {name:'toast',desc:'Toast 轻提示'},
    {name:'popup',desc:'Popup 弹出层'}
  ]
  listForm:Array<any> = [
    {name:'field',desc:'Field 输入框'},
    {name:'picker',desc:'Picker 选择器(doing...)'},
    {name:'radio',desc:'Radio 单选框'},
    {name:'checkbox',desc:'Checkbox 复选框'},
  ]
  listShow:Array<any> = [
    {name:'imagePreview',desc:'imagePreview 图片预览'},
  ]
  // method
  clickShow(name:string){
    this.$router.push({path:'/'+name})
  }
}
</script>
<style lang="scss" scoped>
$arrows:#cccccc;
.rain-logo{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20px;
  img{
    width: 40px;
  }
  span{
    font-size: 20px;
  }
}
.rain-desc{
  text-align: left;
  padding:0 0 10px 20px;
  color: #999999;
}
.rain-title{
  text-align: left;
  padding:10px 0 10px 20px;
  color: #999999;
}
.rain-list{
  padding:10px 10px;
  .item{
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 50px;
    transition: background-color 500ms;
    -webkit-transition: background-color 500ms;
    div:nth-child(2){
      color: $arrows;
    }
  }
  .item:hover{
    background-color: #d7d7d7;
  }
}
</style>
